<template>
    <div class="task-list-container">
        <section :class="['left-container', {'fold-left': isFold}]">
            <div class="fold-control">
                <span :class="[isFold ? 'el-icon-s-unfold' : 'el-icon-s-fold']" @click="changeFold"></span>
            </div>
            <ul>
                <li v-for="item in taskTypes" :key="item.key" :class="{ isActive: activeType == item.key }" @click="changeTaskType(item)" :title="item.value">
                    <span :class="item.icon"></span>
                    <span v-show="!isFold"> {{ item.value }}</span>
                </li>
            </ul>
        </section>
        <section :class="['middle-container',{'fold-left-middle': isFold}]">
            <router-view></router-view>
        </section>
        <section class="right-container"></section>
    </div>
</template>

<script>
export default {
    name: "Home",
    data () {
        return {
            isFold: false,
            activeType: "dailyTask",
            taskTypes: [
                {
                    key: "dailyTask",
                    value: "每日任务",
                    icon: "el-icon-tickets",
                },
                {
                    key: "projectTask",
                    value: "项目任务",
                    icon: "el-icon-collection",
                },
                {
                    key: "calendarTask",
                    value: "日历任务",
                    icon: "el-icon-date",
                },
                {
                    key: "allTask",
                    value: "所有任务",
                    icon: "el-icon-s-order",
                },
            ],
        };
    },
    methods: {
        changeTaskType (item) {
            this.activeType = item.key;
            this.$router.push("/taskList/" + item.key);
        },
        changeFold () {
            this.isFold = !this.isFold;
        }
    },
};
</script>

<style lang="scss" scoped>
.task-list-container {
    width: 100%;
    display: inline-flex;

    .left-container {
        width: 15%;
        height: 100%;
        background-color: rgba(170, 170, 170, 0.2);
        // transition: all 0.2s ease-out;

        .fold-control {
            width: 100%;
            height: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 20px;
            background-color: rgba(187, 187, 187, 0.1);

            span {
                color: rgba(0, 0, 0, 0.5);

                &:hover {
                    cursor: pointer;
                    color: black;
                }
            }
        }

        ul {
            list-style: none;
            li {
                padding: 16px 0;
                font-size: 1rem;
                color: rgba(0, 0, 0, 0.5);

                &:hover {
                    background-color: rgba(187, 187, 187, 0.5);
                    cursor: pointer;
                }

                span {
                    margin: 0 5px;
                }
            }

            .isActive {
                background-color: rgba(187, 187, 187, 0.3);
            }
        }
    }

    .fold-left {
        width: 5%;
        // transition: 0.4s;
    }

    .middle-container {
        // flex-grow: 1;
        // flex: 1 1 auto; //可放大 可缩小
        width: 70%;
        height: 100%;
        margin: 0 10px;
        // background-color: rgba(170, 170, 170, 0.2);
    }

    .fold-left-middle {
        width: 80%;
    }

    .right-container {
        width: 15%;
        height: 100%;
        background-color: rgba(170, 170, 170, 0.2);
    }
}
</style>
